<template>
    <div>
        <h1>解放你的双手</h1>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>我的订单</span>
          </template>
          <el-sub-menu index="1-1">
            <template #title>订单类型</template>
            <el-menu-item index="1-1-1" @click="goto('buy1')">
                <el-icon><icon-menu /></el-icon>
                <span>帮我买</span>
            </el-menu-item>
            <el-menu-item index="1-1-2" @click="goto('sub')">
                <el-icon><icon-menu /></el-icon>
                <span>帮我取</span>
            </el-menu-item>
            <el-menu-item index="1-1-3" @click="goto('send')">
                <el-icon><icon-menu /></el-icon>
                <span>帮我送</span>
            </el-menu-item>
          </el-sub-menu>
           <el-sub-menu index="1-2">
            <template #title>订单状态</template>
            <el-menu-item index="1-2-1" @click="goto('undone')">
                <el-icon><icon-menu /></el-icon>
                <span>待评价</span>
            </el-menu-item>
            <el-menu-item index="1-2-2" @click="goto('done')">
                <el-icon><icon-menu /></el-icon>
                <span>已完成</span>
            </el-menu-item>         
          </el-sub-menu>    
        </el-sub-menu>



        <el-menu-item index="4" @click="goto('profile')">
          <el-icon><setting /></el-icon>
          <span>我的个人信息</span>
        </el-menu-item> 
        <el-menu-item index="3"  @click="goto('umessage')">
          <el-icon><document /></el-icon>
          <span>留言</span>
        </el-menu-item>

      </el-menu>
    </div>
</template>

<script setup>
import router from"../router"//引入路由
  import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const goto=(name)=>{
    router.push({name:name});//push路由跳转 跳转到属性值为name 参数是name
}
</script>

<style lang="scss" scoped>

</style>